<template>
	<view id="g-content-navbar">
		<u-navbar v-if="title" :height="height" :is-back="isBack" :title="title" :title-color="titleColor" :title-bold="titleBold"
		 :back-icon-color="backIconColor" :background="{
				'background-image': 'linear-gradient(45deg, rgb(41, 121, 255), rgb(41, 198, 255))'
			}">
			<template slot="right">
				<slot name="right"></slot>
			</template>
		</u-navbar>
		<u-navbar v-else :height="height" :is-back="isBack" :title-color="titleColor" :title-bold="titleBold"
		 :back-icon-color="backIconColor" :background="{
				'background-image': 'linear-gradient(45deg, rgb(41, 121, 255), rgb(41, 198, 255))'
			}">
			<template slot="right">
				<slot name="right"></slot>
			</template>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: 'g-content-navbar',
		props: {
			isBack: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#ffffff'
			},
			titleBold: {
				type: Boolean,
				default: true
			},
			backIconColor: {
				type: String,
				default: '#ffffff'
			},
			height: {
				type: String | Number,
				default: 44
			}
		},
		computed: {},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			getTabbarHeight(callback) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#g-content-navbar').boundingClientRect(data => {
						callback(data.height)
					}).exec();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
</style>
